<template>
  <div class="toBtoC-tab2">
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="85vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
      >
        <el-table-column label="分类" prop="class1" class-name="first-title" min-width="40"></el-table-column>
        <el-table-column min-width="40" label="分类" prop="class2" class-name="second-title"></el-table-column>
        <el-table-column min-width="40" label="分类" prop="class3" class-name="third-title"></el-table-column>
        <el-table-column
          min-width="40"
          label="分类"
          prop="verticalIndexName"
          class-name="forth-title"
        ></el-table-column>
        <el-table-column min-width="120" label="分类" prop="class4" class-name="fivth-title"></el-table-column>
        <el-table-column
          class-name="right-money"
          v-for="(item,index) in colDefList"
          min-width="120"
          :key="index"
          :label="item.areaName"
          :prop="item.indexKey"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mergeSpan } from "@/utils/mixin";
export default {
  name: "newUpToDownOrganization-tab2",
  props: ["rowData", "colDefList"],
  data() {
    return {
      tableData: [],
      rowLabelList: {
        current: {
          class1: "",
          list: [],
        },
        previous: {
          class1: "",
          list: [],
        },
      },
      tableLoading: false,
      spanArr: null,
    };
  },
  methods: {
    //table合并行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3 ||
        columnIndex == 4
      ) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },

    init() {
      // this.rowLabelList = this.classify2(
      //   this.colDefList,
      //   "class1",
      //   "class2"
      // );
      this.spanArr = this.mergeSpan2(this.rowData, [
        "class1",
        "class2",
        "class3",
        "verticalIndexName",
        "class4",
      ]);
      this.rowData.map((it) => {
        it.verticalIndexName = it.verticalIndexName.replace(/：/, ":").trim();
      });
      this.tableData = this.rowData;
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
      // setTimeout(() => {
      //   this.$refs.table.doLayout();
      // }, 1200);
    },
    mergeSpan2(tableData, arr) {
      let spanArr = new Array(tableData.length);
      for (let m = 0; m < spanArr.length; m++) {
        spanArr[m] = new Array(arr.length);
      }
      arr.forEach((ele, ind) => {
        let pos = null;
        tableData.forEach((item, index, self) => {
          if (index == 0) {
            spanArr[index][ind] = {
              rowspan: 1,
              colspan: 1,
            };
            pos = 0;
          } else {
            if (item[ele] === self[index - 1][ele]) {
              spanArr[pos][ind].rowspan += 1;
              spanArr[index][ind] = {
                rowspan: 0,
                colspan: 0,
              };
            } else {
              pos = index;
              spanArr[index][ind] = {
                rowspan: 1,
                colspan: 1,
              };
            }
          }
        });
      });

      tableData.forEach((item, index) => {
        let pos = null;
        arr.forEach((ele, ind, self) => {
          if (ind == 0 && spanArr[index][ind].rowspan == 1) {
            spanArr[index][ind].colspan = 1;
            pos = 0;
          } else {
            if (item[ele] == item[self[ind - 1]]) {
              spanArr[index][pos].colspan += 1;
              spanArr[index][ind] = {
                rowspan: 0,
                colspan: 0,
              };
            } else {
              pos = ind;
            }
          }
        });
      });
      console.log(spanArr);
      return spanArr;
    },
    classify(arr, key) {
      let obj = {};
      let newArr = [];
      arr.forEach((item, index) => {
        if (item[key] === null) {
          newArr.push([item]);
        } else if (typeof obj[item[key]] == "undefined") {
          obj[item[key]] = 1;
          newArr.push([item]);
        } else {
          let i = newArr.length - 1;
          newArr[i].push(item);
        }
      });
      return newArr;
    },
    classify2(arr, key1, key2) {
      let name = arr[0].class1;
      let obj = {
        current: [],
        previous: [],
      };
      let objCurrent = {};
      let objPrevios = {};
      let newArr = [];
      arr.forEach((item, index) => {
        if (item[key1] == name) {
          obj.current.push(item);
        } else {
          obj.previous.push(item);
        }
      });
      let obj2 = {
        current: {
          class1: obj.current[0].class1,
          list: [],
        },
        previous: {
          class1: obj.previous[0].class1,
          list: [],
        },
      };
      obj2.current.list = this.classify(obj.current, key2);
      obj2.previous.list = this.classify(obj.previous, key2);
      return obj2;
    },
  },
};
</script>

<style lang="scss">
.toBtoC-tab2 {
  .first-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .el-table .cell {
    white-space: pre-wrap;
  }
  .second-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .third-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .forth-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
    }
  }
  .fivth-title.is-leaf {
    overflow: visible;
    .cell {
      transform: translateX(-65%);
    }
  }
}
</style>